<template>
  <div class="selectCor">
    <div>
      <el-input class="searchInput"
                placeholder="请输入搜索内容"
                prefix-icon="el-icon-search"
                @blur="searchContentHandler"
                v-model="searchContent">
      </el-input>
      <el-button  class="searchFun" type="primary"  icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <div v-for="item in Course" style="margin-top: 40px">
      <div class="course">
        <div class="courseName">课程ID:{{item.id}}</div>
        <div class="courseName">课程名:{{item.name}}</div>
        <div class="courseTime">上课时间:{{item.week}}&nbsp;{{item.time}}</div>
        <div class="courseTec">任课教师:{{item.tname}}</div>
        <div class="courseLevel">年级:{{item.level}}</div>
        <div class="courseNum">课程容纳人数:   {{item.now_num}} / {{item.max_num}}</div>
        <div v-if="item.now_num===item.max_num" style="color: red">选课人数已满！</div>
        <div v-if="item.now_num!==item.max_num"><a href="javascript:void(0)" style="color: darkred" @click="applyCor(item.id,item.week,item.time)">申请</a></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    action(){
      this.findStu()
      this.recCourse()

    },
    findStu(){
      let _this=this
      this.$axios({
        method:"GET",
        url:"http://localhost/student/findByUsername/"+_this.username
      }).then(response => {
        _this.sid=response.data.id
      })
    },
    recCourse(){
      let _this=this
      this.$axios({
        method:"GET",
        url:"http://localhost/student/findByUsername/"+_this.username
      }).then(response => {
        this.$axios({
          method:"GET",
          url:"http://localhost/stuSurvey/subjectWant/"+response.data.id
        }).then(response => {
          _this.Course=response.data
        })

        this.$axios({
          method:"GET",
          url:"http://localhost/stuSurvey/subjectDif/"+response.data.id
        }).then(response => {
          let course = response.data
          for(let i of course)
          {
             _this.Course.push(i);
          }
        })

        this.$axios({
          method:"GET",
          url:"http://localhost/stuSurvey/subjectWant/"+response.data.id
        }).then(response => {
          let course = response.data
          for(let i of course)
          {
            _this.Course.push(i);
          }
        })

        this.$axios({
          method:"GET",
          url:"http://localhost/stuSurvey/findLoc/"+response.data.id
        }).then(response => {
          this.$axios({
            method:"GET",
            url:"http://localhost/course/findAllOrder/"+response.data
          }).then(response => {
            let course = response.data
            for(let i of course)
            {
              _this.Course.push(i);
            }
            _this.Course = _this.unique(_this.Course);
          })
        })
      })



    },

    unique(arr) { // 根据唯一标识orderId来对数组进行过滤
      const res = new Map();  //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
    },

    applyCor(cid,week,time){
      let _this=this
      this.$axios({
        method:"GET",
        url:"http://localhost/course/checkClass/"+_this.sid+"/"+week+"/"+time
      }).then(response => {
        if(response.data=='err'){
          this.$message({
            message: '选课时间冲突！',
            type: 'warning'
          });
        }
        if(response.data=='ok'){
          _this.$axios({
            method:"GET",
            url:"http://localhost/student_course/checkSelect/"+_this.sid+'/'+cid
          }).then(response => {
            if(response.data=='err')
            {
              this.$notify.error({
                title: '错误',
                message: '您已经提交过该课程的申请'
              });
            }
            if(response.data=='ok'){
              _this.$axios({
                method:"GET",
                url:"http://localhost/student_course/save/"+_this.sid+'/'+cid
              }).then(response => {
                this.$notify({
                  title: '成功',
                  message: '已提交申请！',
                  type: 'success'
                });
              })
            }
          })
        }

      })

    },
    search(){
      let _this=this
      this.$axios({
        method:"GET",
        url:'http://localhost/course/searchCor/'+_this.searchContent
      }).then(result => {
        _this.Course=result.data
      })
    },
    searchContentHandler(){
      if(this.searchContent==='') this.action();
    },

  },
  mounted() {
    this.username=this.$route.query.username
    this.action()

  },
  data() {
    return {
      Course:[],
      username:'',
      sid:'',
      searchContent:'',
    }
  },

}
</script>

<style scoped>
.selectCor{
  position: absolute;
  left: 150px;
  width: 89.9%;
  height: 800px;
  overflow-y: auto;

}
.course{
  margin-left: 300px;
  width: 400px;
  height: 150px;
  border-style:solid;
  border-width:1px;
  border-color: black;
  background-color: aquamarine;
  margin-top: 5px;
}
.courseName{
  padding-right: 280px;
  left: 30px;
}
.courseTec{
  padding-right: 260px;
  left: 30px;
  top:25px
}
.courseLevel{
  padding-right: 290px;
  left: 30px;
  top:50px
}
.courseNum{
  padding-right: 230px;
  left: 30px;
  top:75px
}
.searchInput{
  margin-top: 20px;
  width: 300px;
  margin-left: -190px;
}
.courseTime{
  margin-left: -200px;
}
</style>
